<template>
  <div class="city-location" :data-ch="title.substring(0,2)">
    <city-title :title='title' :left=true></city-title>
    <div class="city-location-row">
      <div class="city-location-cell" @click="selectCity(localCity)">{{cityName}}</div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import CityTitle from './CityTitle'
export default {
  data () {
    return {
      cityName: '定位中...'
    }
  },
  props: {
    title: String
  },
  computed: {
    ...mapGetters([
      'localCity'
    ])
  },
  mounted () {
    this.reLocation()
  },
  components: {
    CityTitle
  },
  methods: {
    ...mapActions(['locationCity', 'toggleCity']),
    selectCity (city) {
      if (this.localCity.cname) {
        this.toggleCity(city)
        this.$router.go(-1)
      } else {
        this.reLocation()
      }
    },
    reLocation () {
      this.cityName = this.localCity.cname ? this.localCity.cname : '正在定位...'
      const loca = {}
      if (!this.localCity.cname) {
        var geolocation = new this.$BMap.Geolocation()
        geolocation.enableSDKLocation()
        geolocation.getCurrentPosition((r) => {
          if (geolocation.getStatus() === 0) {
            loca.point = {
              lng: r.point.lng,
              lat: r.point.lat
            }
            var myGeo = new this.$BMap.Geocoder()
            myGeo.getLocation(new this.$BMap.Point(116.364, 39.993), (result) => {
              if (result) {
                loca.cname = result.addressComponents.city
                this.cityName = loca.cname
                this.locationCity(loca)
              }
            })
          } else {
            loca.cname = ''
            this.cityName = '定位失败，请点击重试'
            this.locationCity(loca)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
@import '../../../styles/mixins/utils';
.city-location{
  &-row{
    padding:15px 60px 30px 0;
    @include utils-clearfix;
  }
  &-cell{
    min-width: 188px;
    max-width: 365px;
    height: 63px;
    line-height: 63px;
    margin-left: 28px;
    margin-top:16px;
    padding: 0 20px;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    float: left;
    background: #fff;
    @include utils-ellipsis;
  }
}
</style>
